<template>
  <div class="category-page">
    <section class="head flex border-bottom">
      <span class="site">重庆站</span>
      <div class="flex-1 head-group" @click="clickSearch">
          <i class="icon icon-search"></i>
          输入商品名称
      </div>
    </section>
    <div class="content flex">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li class="border-bottom" v-for="item in categoryList" @click="getBrandList(item)" :class="{'active':item.active}">{{item.name}}</li>
        </ul>
      </div>
      <div class="category-wrapper flex-1">
        <!--flex-pack-justify-->
        <div class="list flex flex-wrap " >
          <div class="item border-1px" v-for="item in brandList" @click="clickBrand(item.id)">
            <img :src="item.brandLg">
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <footBar curPage="category"></footBar>
    <xm-loading v-show="loading"></xm-loading>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';

  export default {
    props: {
    },
    data() {
      return {
        loading: true,
        categoryList: [],
        brandList: [],
        cateId: null,
        curCate: null
      }
    },
    methods: {
      clickSearch(){
        this.$router.push({name: 'search'});
      },
      initScroll(){
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
          click: true
        });
      },
      //获取分类列表
      getCategory(){
        getCategory({siteId: Cookie.get('siteId')}).then(data =>{
          if(data.returnCode == '000000'){
            this.categoryList = data.result.categoryList;
            [].forEach.call(this.categoryList, item=>{
              this.$set(item, 'active', false);
            })
            this.getBrandList(this.categoryList[0]);
            this.$nextTick(()=>{
              this.initScroll();
            })
          }
        });
      },
      /**
       * 获取品牌列表
       * @param <object> 分类对象
       * */
      getBrandList(item){
        this.cateId = item.id;
        if(this.curCate){
          this.$set(this.curCate, 'active', false);
        }
        this.curCate = item;
        this.$set(item, 'active', true);
        this.loading = true;
        getBrandList({catId: item.id, siteId: Cookie.get('siteId')}).then(data=>{
          this.loading = false;
          if(data.returnCode == '000000'){
          this.brandList = data.result.brandList;
          }
        })
      },
      //点击品类
      clickBrand(id){
        this.$router.push({name: 'goodsListCate', params: {brandId: id, cateId: this.cateId}});
      }

    },
    created() {

    },
    mounted(){
      this.getCategory();
    },
    components: {
    }
  };
</script>
<style lang="less">
  @import "./category.less";
</style>
